<script>
/*
 * @Author: wzh 
 * @Date: 2021-01-03 16:32:17 
 * @Last Modified by: 1521620993@qq.com
 * @Last Modified time: 2021-01-20 11:26:42
 */
</script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>04-奔跑在高速公路上的白色线条</title>
  
</head>
<body>
<style>
body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: radial-gradient(#9bdfff, #009be4);
}
body .line {
  width: 800px;
  height: 160px;
  background: #525252;
  position: relative;
  transform: perspective(500px) rotateX(30deg);
  transform-origin: bottom;
  transform-style: preserve-3d;
}
body .line::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 10px;
  background: linear-gradient(to right, #fff 0%, #fff 70%, #525252 70%, #525252 100%);
  background-size: 120px;
  left: 0;
  top: 50%;
  transform: translateY(-5px);
  animation: animate 0.5s linear infinite;
}
@-moz-keyframes animate {
  0% {
    background-position: 0px;
  }
  100% {
    background-position: -120px;
  }
}
@-webkit-keyframes animate {
  0% {
    background-position: 0px;
  }
  100% {
    background-position: -120px;
  }
}
@-o-keyframes animate {
  0% {
    background-position: 0px;
  }
  100% {
    background-position: -120px;
  }
}
@keyframes animate {
  0% {
    background-position: 0px;
  }
  100% {
    background-position: -120px;
  }
}
body .line::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 30px;
  background-color: #333;
  bottom: -30px;
  transform: perspective(500px) rotateX(-25deg);
  transform-origin: top;
}
body .line .shadow {
  position: absolute;
  width: 95%;
  height: 60px;
  background: linear-gradient(#000, transparent);
  bottom: -93px;
  left: 400px;
  transform: translateX(-50%);
  opacity: 0.5;
}
</style>
  <div class="line">
    <div class="shadow"></div>
  </div>
<!-- 
body
  margin 0
  padding 0
  display flex
  justify-content center
  align-items center
  min-height: 100vh
  background radial-gradient(#9bdfff, #009be4)
  .line
    width 800px
    height 160px
    background #525252
    position relative
    transform perspective(500px) rotateX(30deg)
    transform-origin bottom
    transform-style preserve-3d
    &::before
      content ''
      position absolute
      width 100%
      height 10px
      background linear-gradient(to right, #fff 0%, #fff 70%, #525252 70%, #525252 100%)
      background-size 120px
      left 0
      top 50%
      transform translateY(-5px)
      animation animate 0.5s linear infinite
      @keyframes animate
        0%
          background-position 0px
        100%
          background-position -120px
    &::after
      content ''
      position absolute
      width 100%
      height 30px
      background-color #333333
      bottom -30px
      transform perspective(500px) rotateX(-25deg)
      transform-origin top
    .shadow
      position absolute
      width 95%
      height 60px
      background linear-gradient(#000, transparent)
      bottom -93px
      left 400px
      transform translateX(-50%)
      opacity 0.5
 -->
</body>
</html>